<template>
  <el-form ref="mapForm" :model="mapForm" label-width="120px">
    <el-row>
      <el-col :span="24">
        <el-form-item :label="`第${mapForm.matchSort}局`"> </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="左边队伍颜色">
          <el-select
            v-model="mapForm.leftTeamType"
            filterable
            placeholder="左边队伍颜色"
            clearable
            :style="{ width: '100%' }"
            @change="changeTeamColor($event, 'right')"
          >
            <el-option
              v-for="item in teamColorData"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="右边队伍颜色">
          <el-select
            v-model="mapForm.rightTeamType"
            filterable
            placeholder="右边队伍颜色"
            clearable
            :style="{ width: '100%' }"
            @change="changeTeamColor($event, 'left')"
          >
            <el-option
              v-for="item in teamColorData"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="左边队伍小龙数">
          <el-input-number
            type="number"
            :min="0"
            :style="{ width: '100%' }"
            v-model="mapForm.roundTwoLeftTeamScore"
            placeholder="左边队伍小龙数"
          >
          </el-input-number>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="右边队伍小龙数">
          <el-input-number
            type="number"
            :min="0"
            :style="{ width: '100%' }"
            v-model="mapForm.roundTwoRightTeamScore"
            placeholder="右边队伍小龙数"
          >
          </el-input-number>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="左边队伍击杀数">
          <el-input-number
            type="number"
            :min="0"
            :style="{ width: '100%' }"
            v-model="mapForm.roundOneLeftTeamScore"
            placeholder="左边队伍击杀数"
          >
          </el-input-number>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="右边队伍击杀数">
          <el-input-number
            type="number"
            :min="0"
            :style="{ width: '100%' }"
            v-model="mapForm.roundOneRightTeamScore"
            placeholder="右边队伍击杀数"
          >
          </el-input-number>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="一血拿取队伍">
          <el-select
            v-model="mapForm.roundOneHgWinId"
            filterable
            placeholder="一血拿取队伍"
            clearable
            :style="{ width: '100%' }"
            @change="changeTeam($event, 'ee')"
          >
            <el-option
              v-for="item in teamList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="LOGO">
          <img
            :src="mapForm.eeTeamLogo"
            width="63"
            height="91"
            v-if="mapForm.eeTeamName"
          />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import { matchStatusData, teamColorData } from "../config";

export default {
  props: {
    mapFormInit: {
      type: Object,
      default: () => ({}),
    },
    teamList: {
      type: Array,
      default: () => [],
    },
    matchTeamsList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      teamColorData,
      matchStatusData,
      mapForm: {},
    };
  },
  methods: {
    changeTeam(e, type) {
      let obj = { name: "", logoUrl: "" };
      if (e) {
        obj = this.teamList.find((item) => item.id == e);
      }
      this.mapForm = {
        ...this.mapForm,
        [`${type}TeamName`]: obj.name,
        [`${type}TeamLogo`]: obj.logoUrl,
      };
    },
    changeTeamColor(e, type) {
      let obj = { code: "", name: "" };
      if (e) {
        obj = this.teamColorData.find((item) => item.code !== e);
      }
      this.mapForm = {
        ...this.mapForm,
        [`${type}TeamType`]: obj.code,
      };
    },
  },
  watch: {
    mapFormInit(newVal, oldVal) {
      this.$nextTick((_) => {
        this.mapForm = { ...newVal };
      });
      console.log("newVal", newVal, this.mapForm);
      this.changeTeam(newVal.roundOneHgWinId);
    },
    immediate: true,
  },
};
</script>

<style scoped>
hr {
  background-color: #ccc;
  height: 1px;
  border: none;
}
</style>
